<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: 谢林芝 983546396@qq.com
 * @LastEditTime: 2022-06-29 14:36:07
-->
<template>
  <div class="EpidemicDynamic">
    <!-- 疫情动态数据展示 -->
    <div class="epidemicDyn">
      <!-- 当前时间 -->
      <div class="nowTime">{{ new Date() | fmtDate }}</div>
      <!-- 第一个部分 -->
      <div class="first">
        <!-- 新增确诊盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]">
            {{ ncovData[0].desc.currentConfirmedIncr }}
          </div>
          <!-- 标题 -->
          <div class="title">新增确诊</div>
        </div>
        <!-- 新增治愈盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]">
            {{ ncovData[0].desc.curedIncr }}
          </div>
          <!-- 标题 -->
          <div class="title">新增治愈</div>
        </div>
        <!-- 新增死亡盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" v-if="ncovData[0]">
            {{ ncovData[0].desc.deadIncr }}
          </div>
          <!-- 标题 -->
          <div class="title">新增死亡</div>
        </div>
      </div>
      <!-- 第二个部分 -->
      <!-- 当前时间 -->
      <div class="nowTime">截止：{{ new Date() | fmtDate }}</div>
      <div class="second">
        <!-- 现存确诊盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color: #ff5b1c" v-if="ncovData[0]">
            {{ ncovData[0].desc.currentConfirmedCount }}
          </div>
          <!-- 标题 -->
          <div class="title">现存确诊</div>
        </div>
        <!-- 现有无症状盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color: #00b1b1" v-if="ncovData[0]">
            {{ ncovData[0].desc.seriousCount }}
          </div>
          <!-- 标题 -->
          <div class="title">现有无症状</div>
        </div>
        <!--累积境外输入盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color: #d42922" v-if="ncovData[0]">
            {{ ncovData[0].desc.suspectedCount }}
          </div>
          <!-- 标题 -->
          <div class="title">累积境外输入</div>
        </div>
        <!-- 累积确诊盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color: #ff5b1c" v-if="ncovData[0]">
            {{ ncovData[0].desc.confirmedCount }}
          </div>
          <!-- 标题 -->
          <div class="title">累积确诊</div>
        </div>
        <!-- 累积治愈盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color: #d42922" v-if="ncovData[0]">
            {{ ncovData[0].desc.curedCount }}
          </div>
          <!-- 标题 -->
          <div class="title">累积治愈</div>
        </div>
        <!-- 累积死亡盒子 -->
        <div class="box">
          <!-- 数量 -->
          <div class="num" style="color: #00b1b1" v-if="ncovData[0]">
            {{ ncovData[0].desc.deadCount }}
          </div>
          <!-- 标题 -->
          <div class="title">累积死亡</div>
        </div>
      </div>
    </div>
    <!-- 国内疫情数据 -->
    <div class="inLandCovid">
      <div class="nowTime">国内病例</div>
      <div class="tableContent">
        <el-table
          :data="inLandCovidInfo"
          style="width: 100%"
          border
          :default-sort="{ prop: 'date', order: 'descending' }"
          :header-cell-style="{ background: '#BAEBB6', color: '#606266' }"
        >
          <!--prop="date" 根据返回的数据显示的字段 -->
          <!-- 地区 -->
          <el-table-column prop="province" label="地区" align="center">
          </el-table-column>
          <!-- 新增确诊 -->
          <el-table-column
            prop="confirmed"
            label="新增确诊"
            sortable
            align="center"
          >
          </el-table-column>
          <!-- 新增疑似 -->
          <el-table-column
            prop="suspected"
            label="新增疑似"
            sortable
            align="center"
          >
          </el-table-column>
          <!--新增死亡-->
          <el-table-column prop="dead" label="新增死亡" sortable align="center">
          </el-table-column>
          <!-- 新增治愈 -->
          <el-table-column prop="cure" label="新增治愈" sortable align="center">
          </el-table-column>
          <!-- 新增输入 -->
          <el-table-column
            prop="outside"
            label="新增输入"
            sortable
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 最新进展 -->
    <!-- 标题 -->

    <div class="nowTime">最新进展</div>
    <div class="lasteProgress">
      <!-- 新闻展示区 -->
      <el-timeline>
        <el-timeline-item
          v-for="item in lasteProgressData"
          :key="item.id"
          :timestamp="item.publishTime | fmtDate"
          placement="top"
          @click.native="toNewsDetails(item)"
        >
          <!-- 调用原生的方法或属性 -->
          <el-card>
            <h4>{{ item.title }}</h4>
            <!-- <p>王小虎 提交于 2018/4/12 20:46</p> -->
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <!-- 模态框 -->
    <el-dialog
      :title="newtitle"
      :visible.sync="dialogVisible"
      center
      width="80%"
    >
      <div class="news" v-html="newsInfo"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="success"
          >取 消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
import { get } from "@/utils/request";
export default {
  data() {
    return {
      inLandCovidInfo: [], // 国内疫情数据
      ncovData: [], //疫情动态数据
      lasteProgressData: [], //最新进展数据
      dialogVisible: false, //对话框是否显示
      newsInfo: "", //新闻内容
      newtitle: "", //新闻标题
    };
  },
  created() {
    this.getInLandCovidInfo();
    this.getLasteProgressData();
  },
  mounted() {
    this.getNcovData();
  },
  methods: {
    //   获取疫情动态数据
    getNcovData() {
      let res = axios({
        url: "http://api.tianapi.com/ncov/index?key=6b8d768f1413ed97ed92d13e75904e88",
      })
        .then((res) => {
          this.ncovData = res.data.newslist;
          //   console.log(this.ncovData);
        })
        .catch((err) => {
          //   console.log(err);
        });
    },
    //   获取国内疫情数据
    async getInLandCovidInfo() {
      // 设置参数
      let params = {
        page: 1,
        pageSize: 5,
      };
      //   发送请求
      let res = await get("/epidemic/pageQuery", params);
      //   console.log(res);
      if (res.status == 200) {
        this.inLandCovidInfo = res.data.list;
      }
    },
    // 获取最新进展数据
    async getLasteProgressData() {
      let params = {
        page: 1,
        pageSize: 10,
      };
      let res = await get("/article/pageQuery", params);
      if (res.status == 200) {
        this.lasteProgressData = res.data.list;
      }
    },
    toNewsDetails(info) {
      this.dialogVisible = true;
      this.newsInfo = info.content;
      this.newtitle = info.title;
    },
  },
};
</script>

<style scoped>
/* 第一部分样式设置 */
.first {
  /* 让所有子元素在父元素上沿着主轴方向进行水平布局 */
  display: flex;
  /* 分配剩余空间 */
  justify-content: space-around;
}
/* 设置当前时间的样式 */
.nowTime {
  color: #999999;
  margin: 5px 5px;
}
/* 第一部分盒子样式 */
.first .box,
.second .box {
  text-align: center;
  background-color: rgb(252, 244, 235);
  width: 33%;
  height: 120px;
  border-radius: 6px;
  margin-bottom: 5px;
  /* font-size: 18px; */
}
.first .box {
  border-radius: 50%;
  background-color: #fff0f5;
}
.first .box .num {
  font-weight: bold;
  margin-top: 40px;
  font-size: 18px;
}
.second .box .num {
  font-weight: bold;
  margin-top: 35px;
}
.first .box .title,
.second .box .title {
  margin: 10px;
}
/* 第二部分样式设置 */

.second {
  display: flex;
  justify-content: space-between;
  /* 设置换行 */
  flex-wrap: wrap;
}
.second .box {
  background-color: #e9ebff;
}
/* 最新进展的样式处理 */
.lasteProgress {
  margin-left: -30px;
}
</style>
